<template>
  <view class="person-card">
    <view class="p-title">
      <view>
        <text :class="genderClass">{{ info?.gender }}·{{ info?.year }}年</text>
        <custom-realname :realname="info.realname"></custom-realname>
      </view>
      <icon-card icon-type="wx"></icon-card>
    </view>
    <view class="p-num">相亲编号{{ info.num }}</view>

    <!-- 描述 -->
    <desc-card from="details" :info="info"></desc-card>

    <!-- 照片 -->
    <view style="margin-top: -20rpx">
      <image-card
        :look="info.look"
        :imgs="info.imgs"
        :id="info.id"
      ></image-card>
    </view>

    <view class="p-lock" v-if="info.imgs?.length && info.look != 1">
      <image src="@/static/common/lock-a.svg" class="p-lock-img"></image>
      <text>解锁对方联系方式后可查看照片</text>
    </view>
  </view>
</template>

<script setup>
// 引入组件
import IconCard from "@/components/person/icon-card.vue";
import DescCard from "@/components/person/desc-card.vue";
import ImageCard from "@/components/person/image-card.vue";

const props = defineProps({
  info: {
    type: Object,
    default: () => {},
  },
});

const genderClass = computed(() => {
  const cObj = {
    男: "boy-text",
    女: "girl-text",
  };
  return cObj[props.info?.gender];
});
</script>

<style lang="scss" scoped>
@import "@/styles/global.scss";

.person-card {
  background: #fff;
  border-radius: 30rpx;
  margin: 20rpx;
  padding: 40rpx 30rpx;
  position: relative;
  .p-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 52rpx;
    font-weight: bold;
    image {
      width: 80rpx;
      height: 40rpx;
    }
  }
  .p-num {
    font-weight: 400;
    font-size: 32rpx;
    color: #666;
  }

  .p-lock {
    width: 650rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffefef;
    font-weight: bold;
    font-size: 32rpx;
    color: #ff5c55;
    border-radius: 40rpx;
    border: 1rpx solid rgba(255, 92, 85, 0.5);
    margin-top: 20rpx;
    .p-lock-img {
      width: 40rpx;
      height: 40rpx;
      margin-right: 20rpx;
    }
  }
}

.re-icon {
  width: 140rpx !important;
  height: 40rpx !important;
  margin-left: 10rpx;
}
</style>
